<template>
  <div class="container">
    <svg class="icon" width="50px" height="50.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path :fill="color" d="M868.053333 798.122667v-30.208h-103.125333L640 981.333333h-213.333333l-132.352-213.418666H172.544v48.64a57.173333 57.173333 0 0 1-114.304 0v-353.578667a57.173333 57.173333 0 1 1 114.304 0v48.64h123.690667L426.666667 298.666667V149.077333L79.445333 105.770667S16.298667 73.813333 55.466667 42.666667H640v256l124.885333 213.034666h99.968v-48.810666a57.002667 57.002667 0 1 1 113.962667 0v335.872a55.04 55.04 0 0 1-55.381333 55.04 55.722667 55.722667 0 0 1-55.381334-55.68z"  />
    </svg>
    <span class="name">{{deviceName}}</span>
  </div>

</template>

<script>
export default {
  name: "BallValve",
  props: {
    color: {
      type: String,
      default: "#A9A9A9", // 默认颜色:深灰色
    },
    deviceName:{
      type: String,
      default: "球阀"
    },
  },
}
</script>

<style scoped>
.container{
  width: 50px;
}
.name{
  display: flex;
  justify-content: center;
  font-size: 10px;
}
</style>
